// @flow
import * as React from 'react';
import styles from "./ProductList.module.css";
import {Col, Row} from "antd";
import {useSelector} from "../../../../store/hook";
import {ProductImage} from "./ProductImage";


type Props = {};
export const ProductList = (props: Props) => {

    const products = useSelector(s => s.product.data)

    return (
        <div className={styles.productList}>
            <Row gutter={[24, 16]}>
                {products != null && products.map((item, index) => (
                    <Col span={4} key={"Product-" + index}>
                        <ProductImage
                            id={item.id}
                            title={item.name}
                            imageSrc={item.pic}
                            price={item.price}
                        />

                    </Col>
                ))}
            </Row>

        </div>
    );
};
